Learn from Figma - Prepare for handoff 向 Figma 學習：交付前的準備

設計需要團隊合作

設計工作離不開團隊配合，需要不同角色的人一起參與：

• 產品經理：可以用 Figma 討論想法，或者留言提意見

• 文案人員：可以直接改文字或給出文案建議

• 使用者研究員和設計師：可以分享原型來做使用者測試

• 開發人員：可以檢視設計細節、複製程式碼和下載素材

這系列影片展示了一個手機應用從草圖到可點選原型的完整過程，讓你看到設計團隊是如何協作的。

如何共享檔案和設定縮圖

為了讓團隊更容易看懂你的設計檔案，Figma 提供了一些實用技巧：

設定縮圖

• 縮圖大小是 1920x960

• 中間 1600 畫素的部分最重要，在檔案列表裡總是能看到

• 縮圖可以放：
  • 檔案當前狀態
  • 團隊資訊
  • 設計內容的圖片
  • 連結到其他頁面或設計規範文件

• 設定方法：在畫布上右鍵點選，選擇"設為縮圖"

如何邀請他人和設定許可權

許可權型別

• 編輯許可權：可以修改檔案

• 檢視許可權：可以留言、下載素材、檢視原型（免費）

• 你也可以把 Figma 檔案嵌入到其他工具裡，比如專案管理工具或設計文件

什麼時候邀請開發人員

• 早期：問問能不能實現

• 後期：準備交給開發團隊做了

檢視模式有什麼功能

當你以檢視者身份開啟檔案時，介面會簡單一些，但功能還是很齊全：

• 工具欄：有移動、評論和拖動工具

• 原型預覽：可以看頁面流程和互動

• 右側欄：
  • 檢查面板：檢視圖層名稱、樣式和程式碼
  • 匯出面板：下載圖示等素材

開發人員可以在這裡看到樣式名稱、程式碼說明和元件文件，方便寫程式碼時保持一致。

如何匯出素材

匯出圖示或圖片的步驟：

1. 選中圖示

2. 開啟"匯出"面板

3. 點選"+"新增匯出設定，預設是 1 倍大小的 PNG

4. 可以調整倍數來改變大小

5. 支援的格式有：PNG、JPG、PDF、SVG

6. 例如：改成 SVG 格式後，點選"匯出"就能下載

如果不想讓檢視者複製或匯出內容，可以在"共享"設定裡關閉這些選項。

學習資源

• 需要幫助：點選右下角的問號，可以看幫助文件或影片教程

• 找靈感：去 Figma 社群看看別人的作品

• 最好的學習方法：多動手練習，在實踐中學習